<template>
	<div class="cart-list">
		<dl class="cart" ref='cart' v-if="addCartList.length">
				<dt>
					<label><input type="checkbox" v-model="allSelected" @click="allProSelected" />全选</label>
					<a href="javascript:;" @click="changeEditFlag" class="edit">编辑</a>
				</dt>
				<dd v-for="pro in addCartList">
					<input type="checkbox" v-model="pro.selected" @click="proSelected(pro)" />
					<router-link :to="{path:'/pro_detail'}" class="goodsPic"><img :src="pro.proImg" /></router-link>
					<div class="goodsInfor">
						<h2>
							<router-link :to="{path:'/pro_detail'}">{{pro.proTitle}}</router-link>
							<span>{{pro.proCount}}</span>
						</h2>
						<div class="priceArea" v-show="!editFlag">
							<strong>{{pro.proPrice}}</strong>
							<span>{{pro.oldProPrice}}</span>
						</div>
						<div class="numberWidget" v-show="editFlag">
							<input type="button" value="-" class="minus" @click="proMinus(pro)" />
							<input type="text" v-model="pro.proCount" disabled class="number" />
							<input type="button" value="+" class="plus" @click="proPlus(pro)" />
						</div>
					</div>
					<div @click="proDelete(pro)" v-show="editFlag" class="delBtn">删除</div>
				</dd>
		</dl>
		<!--bottom nav-->
		<div style="height:1rem;"></div>
		<aside class="btmNav" v-if="addCartList.length  && !editFlag">
			<a>合计：￥{{sumPrice}}</a>
			<a href="javascript:;" style="background:#64ab5b;color:white;text-shadow:none;" @click="orderCart">立即下单</a>
		</aside>
		<div class="cart-tip" v-show="!addCartList.length">
			<div class="tip">购物车啥都没有，赶快去购物吧！</div>
			<router-link class="go-buy" :to="{path:'category'}">去购物 go!</router-link>
		</div>
	</div>
</template>
<script>
	import store from "@/store/index.js";
	export default {
		data() {
			return {
				loading: false,
				editFlag: false,
				cartList: [],
				allSelected: false,
				sumPrice:0
			}
		},
		mounted() {
			let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
			this.$nextTick(function() {
				this.$refs.cart.style.height = h + 'px';
			});
			let cart = this.addCartList;
			if (this.isAllSelected(cart)) {
				this.allSelected = true;
			}
			this.updateAccount(this.addCartList);
		},
		methods: {
			changeEditFlag() {
				this.editFlag = !this.editFlag;
			},
			allProSelected() {
				let cart = this.addCartList;
				//this.allSelected=!this.allSelected;
				if (this.isAllSelected(cart)) {
					cart.forEach(item => {
						item.selected = false;
						this.allSelected = false;
					});
				} else {
					cart.forEach(item => {
						item.selected = true;
						this.allSelected = true;
					});
				}
				this.updateCartList(cart);
				this.updateAccount(cart);
			},
			isAllSelected(cartList) {
				var len = cartList.filter(item => item.selected == true).length;
				if (len == cartList.length) {
					return true;
				} else {
					return false;
				}
			},
			updateAccount(cartList) {
				let cart = cartList.filter(item => item.selected == true);
				// var total='';
				// cart.forEach(item=>{
				// 	total+=item.proCount*JSON.parse(item.proPrice)
				// });
				// console.log(total);
				//this.sumPrice = 0;
				for(var i in cart){
					this.sumPrice += cart[i].proPrice * cart[i].proCount;
				};
			},
			proPlus(pro) {
				let cart = this.addCartList;
				let proInfo = pro;
				let proIndex = cart.findIndex(item => item.proId == pro.proId);
				if (cart[proIndex].proCount == 10) {
					return mui.toast('已超过库存了');

				}
				cart[proIndex].proCount++;
				this.updateCartList(cart);
				this.updateAccount(cart);
			},
			proMinus(pro) {
				let cart = this.addCartList;
				let proInfo = pro;
				let proIndex = cart.findIndex(item => item.proId == pro.proId);
				if (cart[proIndex].proCount == 1) {
					return mui.toast('购物车商品最小数量为1');
				}
				cart[proIndex].proCount--;
				this.updateCartList(cart);
				this.updateAccount(cart);
			},
			proDelete(pro) {
				let cart = this.addCartList;
				let proInfo = pro;
				let proIndex = cart.findIndex(item => item.proId == pro.proId);
				if (proIndex != -1) {
					mui.confirm('您将删除该商品', '操作提示', ['取消', '确定'], function(e) {
						if (e.index == 1) {
							cart.splice(proIndex, 1);
							mui.toast('删除成功');
						}

					})
				}
				this.updateCartList(cart);
			},
			proSelected(pro) {
				let cart = this.addCartList;
				let proInfo = pro;
				let proIndex = cart.findIndex(item => item.proId == pro.proId);
				cart[proIndex].selected = cart[proIndex].selected ? false : true;
				if (this.isAllSelected(cart)) {
					this.allSelected = true;
				} else {
					this.allSelected = false;
				};
				this.updateCartList(cart);
				this.updateAccount(cart);

			},
			updateCartList(cart) {
				store.dispatch('updateAddGoodsNum', cart.length);
				store.dispatch('updateCartList', cart);
				localStorage.setItem('cart', JSON.stringify(cart));
			},
			orderCart() {
				var _this = this;
				var len = this.addCartList.filter(item => item.selected == true).length;
				if (len == 0) {
					return mui.toast('您还未选择结算商品');
				} else {
					mui.confirm('您将结算' + len + '件商品,合计'+this.sumPrice+'元', '操作提示', ['取消','确定'], function(e) {
						if (e.index == '1') {
							_this.$router.push({
								path: 'order'
							});
						}
					})
				}
			}
		},
		computed: {
			addCartList() {
				return store.getters.cartList;
			}
		}
	}
</script>

<style>
	.cart-list {
		position: relative;
	}

	.cart-tip {
		text-align: center;

	}

	.cart-tip .go-buy {
		border-radius: 5px;
		display: inline-block;
		line-height: 40px;
		color: #fff;
		padding: 0 20px;
		font-size: 14px;
		background: #008000;
		margin-top: 30px;
	}
</style>
